<template>
  <el-popover v-if="showPopover"
              placement="left"
              width="600"
              trigger="hover"
              popper-class="popper-class"
              :content="text"
  >
    <div class="text-overflow-class" ref="text" slot="reference">{{ text }}</div>
  </el-popover>
  <div v-else class="text-overflow-class" ref="text">{{ text }}</div>
</template>

<script>
export default {
  name: 'text-overflow',
  props: ['text'],
  data() {
    return {
      showPopover: false
    }
  },
  mounted() {
    this.setOverFlowStatus()
  },
  watch: {
    text: function(v) {
      this.setOverFlowStatus()
    }
  },
  methods: {
    setOverFlowStatus() {
      this.$nextTick(() => {
        let dom = this.$refs.text
        this.showPopover = dom.offsetHeight <= dom.scrollHeight
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.text-overflow-class {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  word-break: break-all;
  white-space: normal;
  line-height: 26px;
}


</style>
<style>
.popper-class {
  line-height: 26px;
}
</style>
